<template>
  <!-- <div class="resizable-pane" :style="{ width: containerWidth + 'px' }" ref="containerRef"> -->

      <!-- <div class="code-pane" :style="{ width: codeWidth + 'px' }"> -->
        <Vue3DraggableResizable
          :w="containerWidth"
          :draggable="false"
          class="resizable-pane" 
          ref="containerRef"
        >
          <Vue3DraggableResizable
            :w="codeWidth"
            :minW="minCodeWidth"
            :parent="true"
            :disabledH="true"
            :adsorbParent="true"
            :handles="['mr']"
            @resize="handleResize"
          >
            <div class="code-pane">
              <slot name="code"></slot>
            </div>
          </Vue3DraggableResizable>

            
          <Vue3DraggableResizable
            :w="codeWidth"
          >
            <div class="render-pane">
              <slot name="render"></slot>
            </div>
          </Vue3DraggableResizable>

        </Vue3DraggableResizable>
      <!-- </div> -->
      <!-- <div class="resize-bar"></div> -->

  <!-- </div> -->
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';

  const props = defineProps({
    defaultCodeWidth: {
      type: Number,
      default: 400,
    },
    minCodeWidth: {
      type: Number,
      default: 0,
    },
  })
  const codeWidth = ref(props.defaultCodeWidth);
  const containerWidth = ref(null);
  const containerRef = ref(null)
  onMounted(() => {
    console.log(window.innerWidth);
    containerWidth.value = window.innerWidth
  })
  const handleResize = (width) => {
    codeWidth.value = width;
    containerWidth.value = containerRef.value.clientWidth;
  }
</script>

<style scoped>
.resizable-pane {
  display: flex;
  height: 100%;
  overflow: hidden;
  float: left;
}

.code-pane {
  flex: 0 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #ebeef5;
}

.resize-bar {
  width: 6px;
  cursor: ew-resize;
  background-color: blue;
}

.render-pane {
  flex: 1 1 auto;
  overflow: auto;
}
</style>
